<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="50%"
    title="已选打印材料列表"
    :style="{ height: heightY }"
    :before-close="handleClose"
    style="margin-top: 30px"
  >
    <div>
      <el-alert
        title="单页模式下,在左侧目录树中，右键单击材料类别或材料所在行,将材料加入打印列表"
        type="success"
        :closable="false"
      ></el-alert>
      <el-row>
        <el-button type="primary">打印选中</el-button>
        <el-button type="primary">打印当前页</el-button>
        <el-button type="primary">打印当前份</el-button>
        <el-button type="primary">打印当前类</el-button>
        <el-button type="primary">打印全部</el-button>
        <el-button type="primary">取消全部</el-button>
      </el-row>
      <el-row>
        <vxe-table style="margin-top: 20px" :align="allAlign" :data="tableData">
          <vxe-column field="name" title="材料类别"></vxe-column>
          <vxe-column field="sex" title="材料名称"></vxe-column>
          <vxe-column field="age" title="制成时间"></vxe-column>
          <vxe-column field="age" title="打印页数"></vxe-column>
          <vxe-column field="age" title="总页数"></vxe-column>
          <vxe-column field="age" title="操作"></vxe-column>
        </vxe-table>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "print",
  data() {
    return {
      dialogVisible: false,
      heightY: window.innerHeight - 10 + "px",
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "test abc",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women",
          age: 24,
          address: "Shanghai",
        },
      ],
      allAlign:'center',
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
  },
};
</script>

<style scoped>
</style>